<template>
  <el-card>
    <div slot="header">
      个人设置
    </div>
    <!-- 栅格 -->
    <el-row>
      <el-col :span="12">
        <el-form label-width="120px">
          <el-form-item label="编号：">{{user.id}}</el-form-item>
          <el-form-item label="手机：">{{user.mobile}}</el-form-item>
          <el-form-item label="媒体名称：">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="媒体介绍：">
            <el-input v-model="user.intro" type="textarea" :rows="3"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="updataSubmit" type="primary">保存设置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <!-- :http-request="updateUserPhoto"  手动上传图片 -->
        <el-upload :http-request="updateUserPhoto" class="avatar-uploader" action="" :show-file-list="false">
          <img v-if="user.photo" :src="user.photo" class="avatar" />
          <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
        <p style="text-align:center">修改头像</p>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import { loadUserInfo, updataSubmit, updateUserPhoto } from '@/api/setting.js'
export default {
  data () {
    return {
      // 提交的用户信息
      user: {
        id: '',
        name: '',
        intro: '',
        email: '',
        photo: ''
      }
    }
  },
  methods: {
    // 手动上传头像
    // 当改变图片时 会将新图片给参数
    async updateUserPhoto (params) {
      //   console.log(photo)
      try {
        // 上传头像的图片
        const fd = new FormData()
        fd.append('photo', params.file)
        //   console.log(fd)
        const ret = await updateUserPhoto(fd)
        // 更新表单
        this.photo = ret.data.photo
      } catch (error) {
        console.log(error)
        this.$message.error('更新头像失败')
      }
    },
    // 提交表单
    async updataSubmit () {
      try {
        await updataSubmit(this.user)
      } catch (error) {
        console.log(error)
        this.$message.error('更新用户信息失败')
      }
    },
    // 获取用户信息
    async loadUserInfo () {
      try {
        const ret = await loadUserInfo()
        this.user = ret.data
      } catch (error) {
        console.log(error)
        this.$message.error('获取用户信息失败')
      }
    }
  },
  created () {
    this.loadUserInfo()
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader {
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
}
</style>
